<template>
	<view>
		<Navbar :isReturn="true"></Navbar>

		<view class="u-m-20">
			<view class="u-card-box">
				<view class="u-m-t-20"></view>
				<u-form>
					<view v-for="(item,index) in formList" :key="item.id">
						<view v-if="item.type == 7">
							<u-parse :html="item.content"></u-parse>
						</view>
						<view class="u-font-32" v-else>
							<span>{{ index +1 }}.{{item.content}}</span>
							<span v-if="item.type > 2">（{{ formSelect[item.type] }}）</span>
							<span class="u-color-red" v-if="item.is_required == 1">*</span>
						</view>
						<u-form-item :border-bottom="false" v-if="item.type < 3">
							<u-input v-model="item.value" :type="[1].includes(item.type) ? 'text' : 'textarea'"
								:border="true" :placeholder="item.tip"></u-input>
						</u-form-item>
						<u-form-item :border-bottom="false" v-else-if="item.type == 3">
							<u-radio-group size="30" v-model="item.value" :wrap="true" active-color="#B3723E">
								<u-radio label-size="30" @change="radioChange()"
									v-for="(radioItem, radioIndex) in item.option" :key="radioIndex"
									:name="radioItem.value">
									{{radioItem.label}}
								</u-radio>
							</u-radio-group>
						</u-form-item>
						<u-form-item :border-bottom="false" v-else-if="item.type == 4">
							<u-checkbox-group size="30" :wrap="true" active-color="#B3723E">
								<u-checkbox label-size="30" @change="handleCheck()" v-model="checItem.checked"
									v-for="(checItem, checkIndex) in item.option" :key="checkIndex"
									:name="checItem.value">
									{{ checItem.label }}
								</u-checkbox>
							</u-checkbox-group>
						</u-form-item>
						<u-form-item :border-bottom="false" v-else-if="[5,6].includes(item.type)">
							<u-button type="warning" size="mini" :custom-style="btnStyle"
								@click="handleUploadFile(item,index)">上传</u-button>
							<view class="u-ellipsis" v-if="item.fileList.length > 0">
								<view class="u-flex u-row-between u-ellipsis"
									v-for="(fileItem,fileIndex) in item.fileList" :key="fileIndex">
									<view class="u-flex-1 over_hidden u-ellipsis u-m-r-10">
										{{ fileItem.label }}
									</view>
									<u-icon name="close" size="30"
										@click="handleDeleteUploadFile(item,fileIndex)"></u-icon>
								</view>
							</view>
						</u-form-item>
						<u-form-item :border-bottom="false" v-else-if="[8].includes(item.type)">
							<u-button type="warning" size="mini" :custom-style="btnStyle"
								@click="handleUploadVideo(item,index)">上传视频</u-button>
							<view class="u-ellipsis" v-if="item.fileList.length > 0">
								<view class="u-flex u-row-between u-ellipsis"
									v-for="(fileItem,fileIndex) in item.fileList" :key="fileIndex">
									<view class="u-flex-1 over_hidden u-ellipsis u-m-r-10">
										{{ fileItem.label }}
									</view>
									<u-icon name="close" size="30"
										@click="handleDeleteUploadFile(item,fileIndex)"></u-icon>
								</view>
							</view>
						</u-form-item>
					</view>
				</u-form>
			</view>
		</view>

		<view style="height: 200rpx;"></view>
		<Bottom :btnText="'立即报名'" @confirm="handleSubmit"></Bottom>
	</view>
</template>

<script>
	import Navbar from '@/components/Navbar.vue'
	import Bottom from '@/components/Bottom.vue'
	import {
		formatContent
	} from '@/utils/index.js'
	import {
		getActivityWrite,
		userActivitySign
	} from '@/network/demand.js'
	import {
		ossUpload
	} from '@/utils/jason-alioss-upload/oss.js'
	import env from '@/network/env.js'
	export default {
		components: {
			Navbar,
			Bottom
		},
		data() {
			return {
				ticketData: {},
				user_id: uni.getStorageSync("user_id"),
				user_name: uni.getStorageSync("user_name"),
				user_phone: uni.getStorageSync("user_phone"),
				formList: [],
				formSelect: {
					'3': '单选',
					'4': '多选',
					'5': '请上传小于20m的文件，最多6个',
					'6': '请上传图片',
					'8': '请上传视频'
				},
				btnStyle: {
					height: '56rpx',
					padding: '0 40rpx'
				},
				action: `${env.baseUrl}/api/uploadOssImage`,
			}
		},
		onLoad(options) {
			this.ticketData = JSON.parse(options.params)
			this.handleGetWrite()
		},
		methods: {
			handleGetWrite() {
				const params = {
					activity_id: this.ticketData.activity_id,
					ticket_id: this.ticketData.ticket_id
				}
				getActivityWrite(params).then(res => {
					res.data.list.map(item => {
						if (item.type == 4) {
							item.option.map(item2 => item2.checked = false)
						} else if ([5, 6, 8].includes(item.type)) {
							item.fileList = []
						} else if (item.type == 7) {
							item.content = formatContent(item.content)
						}
						item.value = ''
					})
					this.formList = res.data.list
				})
			},
			radioChange(val) {},
			handleCheck(val) {},
			handleUploadFile(items, index) {
				if (items.type == 5) {
					let _this = this
					wx.chooseMessageFile({
						type: 'file',
						count: 6,
						success: function(res) {
							const tempFilePaths = res.tempFiles
							let isSize = tempFilePaths.some(tempItem => {
								if (tempItem.size > 20971520) return tempItem
							})
							if (isSize == true) {
								uni.showToast({
									icon: "none",
									duration: 2000,
									title: "请上传小于20m的文件",
								})
							} else if (items.fileList.length >= 6) {
								uni.showToast({
									icon: "none",
									duration: 2000,
									title: "最多上传6个附件"
								})
							} else {
								let tempFile_SuccessNum = 0
								uni.showLoading({
									title: '文件上传中',
									mask: true
								});
								`${_this.activity_id}-${_this.user_name}-${_this.user_phone}-${index + 1}-`
								tempFilePaths.map((fileItem, fileIndex) => {
									ossUpload(fileItem.path, fileItem.name, 'images/common/',
											`${_this.ticketData.activity_id}-${_this.user_name}-${_this.user_phone}-${index + 1}-`,
											`${fileItem.name.substring(fileItem.name.indexOf('.'))}`)
										.then(ossRes => {
											if (ossRes.success == true) {
												if (items.fileList.length >= 6) {
													uni.showToast({
														icon: "none",
														duration: 2000,
														title: "最多上传6个附件"
													})
													uni.hideLoading()
													throw new Error("中断循环")
												} else {
													tempFile_SuccessNum += 1
													const params = {
														label: fileItem.name,
														value: `${ossRes.data},${ossRes.data.substring(60)}`
													}
													items.fileList.push(params)
												}
												if (tempFile_SuccessNum == tempFilePaths.length) {
													uni.hideLoading()
												}
											} else {
												uni.hideLoading()
												uni.showToast({
													icon: "none",
													duration: 2000,
													title: "上传失败"
												})
											}
										})
								})
							}
						}
					})
				} else {
					let _this = this
					uni.chooseImage({
						sizeType: ['original', 'compressed'],
						sourceType: ['album'],
						success: function(res) {
							uni.showLoading({
								title: "上传中"
							})
							const tempFilePath = res.tempFilePaths[0]
							uni.uploadFile({
								url: `${_this.action}`,
								filePath: tempFilePath,
								name: 'file',
								success: (uploadRes) => {
									const parmas = {
										label: JSON.parse(uploadRes.data)
											.data.url,
										value: JSON.parse(uploadRes.data)
											.data.url
									}
									items.fileList.push(parmas)
									uni.hideLoading()
								}
							});
						}
					})
				}
			},
			handleDeleteUploadFile(items, index2) {
				items.fileList.splice(index2, 1)
			},
			handleUploadVideo(items, index) {
				const _this = this
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					success: function(res) {
						uni.showLoading({
							title: "上传中"
						})
						ossUpload(res.tempFilePath, res.tempFilePath , 'images/common/','',`${res.tempFilePath.substring(res.tempFilePath.indexOf('.'))}`).then(ossRes=>{
							if(ossRes.success == true){
								const params = {
									label: res.tempFilePath,
									value: ossRes.data
								}
								items.fileList = []
								items.fileList.push(params)
								uni.hideLoading()
							}else{
								uni.hideLoading()
								uni.showToast({
									icon: "none",
									duration: 2000,
									title: "上传失败"
								})
							}
						})
					}
				})
			},
			handleSubmit() {
				let list = []
				this.formList.map(item => {
					switch (item.type) {
						case 1:
						case 2:
						case 3:
							let params = {
								id: item.id,
								value: item.value
							}
							list.push(params)
							break;
						case 4:
							item.value = item.option.filter(filterItem => filterItem.checked).map(mapItem =>
								mapItem.value).join(",")
							let checkParams = {
								id: item.id,
								value: item.value
							}
							list.push(checkParams)
							break;
						case 5:
						case 6:
							let uploadParams = {
								id: item.id,
								value: item.fileList.map(item => item.value).join(";")
							}
							list.push(uploadParams)
							break;
						case 8:
					        let videoParams = {
								id: item.id,
								value: item.fileList[0].value
							}
							list.push(videoParams)
							break;
					}
				})
				if (this.ticketData.is_charge == 0) {
					const data = {
						user_id: this.user_id,
						ticket_id: this.ticketData.ticket_id,
						activity_id: this.ticketData.activity_id,
						reference_id: this.ticketData.inviterId,
						params: JSON.stringify(list)
					}
					userActivitySign(data).then(res => {
						uni.redirectTo({
							url: "/pages/activityDetail/activityDetail?id=" + this.ticketData.activity_id
						})
					})
				} else {
					getApp().globalData.activityForm = JSON.stringify(list)
					uni.redirectTo({
						url: "/operate/activityPay/activityPay?params=" + JSON.stringify(this.ticketData)
					})
				}
			}
		}
	}
</script>

<style scoped>
	::v-deep .u-form-right {
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}

	::v-deep .u-form-right__content {
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}
</style>